<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="./bootstrap/js/jquery.slim.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <style>
        /* 版心与鼠标放上 */
        .mynavbar {
            height: 50px;
            background-color: rgb(52, 58, 64);
            /* position:fixed; */
            top: 0px;
        }

        .mynavbar .navbar-brand,
        .mynavbar .nav-item .nav-link {
            color: white;
        }

        .mynavbar .navbar-nav .nav-link {
            height: 50px;
            line-height: 35px;
            color: #cccccc !important;
        }

        .mynavbar .nav-item .nav-link:hover {
            height: 50px;
            background-color: rgb(8, 8, 8);
            color: white !important;
        }

        /* 关于 弹窗 */
        .mynavbar .navbar-nav .mybtn {
            background-color: red;
            border: none;
            background-color: rgb(52, 58, 64);
            color: #cccccc !important
        }

        /* 轮播图的内容介绍 */
        .bd-example .carousel-inner .carousel-caption {
            top: 370px;
        }

        /* 三项介绍和下载 */
        .myCenter {
            margin-top: 20px;
            overflow: hidden;
        }

        /* 第三个的点击下载 */
        .myCenter .card-body .meda{
             margin-top: 20px;
        }

        .myCenter .card {
            border: none;
            width: 500px;
            padding: 10px;
            margin-left: 50px;
            float: left;
        }

        .myCenter .card img {
            width: 130px;
            height: 130px;
            margin-left: 75px;
        }

        .myCenter .card .card-body a {
            background-color: rgb(255, 255, 255);
            color: rgb(108, 117, 125);
            border: 1px solid rgb(108, 117, 125);
        }

        /* 滑动门 */
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .mycontent{
            overflow: hidden;
        }
        .mycontent .conter{
            margin-top: 130px;
            width: 627px;
    
            /* float: left; */
            /* background-color: red; */
        }
        .mycontent .photo{
            width: 380px;
            height: 380px;
            /* float: right; */
            margin-right: 70px;
            background-color: red;
        }
        .mycontent .photo img{
            width: 380px;
            height: 380px;
        }
    </style>
</head>

<body>
    <!-- 目录 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-ligh mynavbar">
        <div class="container">
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">综述</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">简述</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                            特点
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">Chrome</a>
                            <a class="dropdown-item" href="#">Firefox</a>
                            <a class="dropdown-item" href="#">Safari</a>
                            <a class="dropdown-item" href="#">Opera</a>
                            <a class="dropdown-item" href="#">IE</a>
                        </div>
                    </li>
                    <!-- Button trigger modal -->


                    <!--关于  -->

                    <button type="button" class="btn btn-primary mybtn" data-toggle="modal"
                        data-target="#exampleModalLong">
                        关于
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog"
                        aria-labelledby="exampleModalLongTitle" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                   这是关于里弹出的内容
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn btn-primary">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </ul>
            </div>
        </div>
    </nav>

    <!-- 轮播图 -->
    <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
            </ol>
            <div class="carousel-inner" style="height: 500px;">
                <div class="carousel-item active">
                    <img src="./images/chrome-big.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block mytitlt">
                        <h5>Chrome</h5>
                        <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/firefox-big.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Firefox</h5>
                        <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/ie-big.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>IE</h5>
                        <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/opera-big.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Opera</h5>
                        <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./images/safari-big.jpg" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Third slide label</h5>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <!-- 三项介绍和下载 -->
    <div class="container myCenter text-center">
        <div class="card " style="width: 18rem;">
            <img class="card-img-top" src="./images/chrome-logo-small.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Chrome</h5>
                <p class="card-text">
                    Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                </p>
                <a href="#" class="btn btn-primary">点击下载</a>
            </div>
        </div>

        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="./images/firefox-logo-small.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Firefox</h5>
                <p class="card-text">
                    Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。
                </p>
                <a href="#" class="btn btn-primary">点击下载</a>
            </div>
        </div>
 
        <div class="card" style="width: 18rem;">
            <img class="card-img-top" src="./images/safari-logo-small.jpg" alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title">Safari</h5>
                <p class="card-text">
                    Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。
                </p>
                <a href="#" class="btn btn-primary meda">点击下载</a>
            </div>
        </div>
    </div>
    <!-- 实线分割线 -->
    <div class="container">
        <HR align=left color=pink SIZE=3 noShade>
    </div>
    <!-- 滑动门 -->
    <div class="container mycontent">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                    aria-selected="true">Google</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                    aria-controls="profile" aria-selected="false">Firefox</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                    aria-controls="contact" aria-selected="false">Safari</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#opera" role="tab"
                    aria-controls="contact" aria-selected="false">Opera</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#IE" role="tab"
                    aria-controls="contact" aria-selected="false">IE</a>
            </li>
        </ul>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="photo fr">
                    <img src="./images/chrome-logo.jpg" alt="">
                </div>
                <div class="conter fl">
                    <h4>Google Chrome<span class="text-muted small">使用最广的浏览器</span></h4>
                    <span>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。
                        该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</span>
                </div>
            </div>   
            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="photo fl">
                    <img src="./images/firefox-logo.jpg" alt="">
                </div>
                <div class="conter fr">
                    <h4>Mozilla Firefox<span class="text-muted small">美丽的狐狸</span></h4>
                    <span>
                        Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。
                    </span>
                </div>
            </div>

            <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                <div class="photo fr">
                    <img src="./images/safari-logo.jpg" alt="">
                </div>
                <div class="conter fl">
                    <h4>Safari<span class="text-muted small">Mac用户首选</span></h4>
                    <span>
                        Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。
                    </span>
                </div>
            </div>

            <div class="tab-pane fade" id="opera" role="tabpanel" aria-labelledby="opera-tab">
                <div class="photo fl">
                    <img src="./images/opera-logo.jpg" alt="">
                </div>
                <div class="conter fr">
                    <h4>Opera<span class="text-muted small">小众但易用</span></h4>
                    <span>
                        Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
                    </span>
                </div>
            </div>

            <div class="tab-pane fade" id="IE" role="tabpanel" aria-labelledby="IE-tab">
                <div class="photo fr">
                    <img src="./images/ie-logo.jpg" alt="">
                </div>
                <div class="conter fl">
                    <h4>IE<span class="text-muted small">你懂的</span></h4>
                    <span>
                        Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- 实线分割线 -->

    <div class="container">
        <HR align=left color=pink SIZE=3 noShade>
    </div>
    <div class="container">
        <div class="left fl"><span>@ZZJ</span></div> 
        <div class="right fr"><a href="#">回到顶部</a></div>
    </div>
</body>

<script>

</script>

</html>

